<template>
  <!-- 1. 首页 -->
  <!-- 1.1头部内容 -->
  <head-info />
  <!--平台数据 -->
  <cm-nums-out :data="countData"></cm-nums-out>
  <!-- 内容展示 -->
  <info></info>
  <!-- 热门活动 -->
  <hot-recommendation :hotTasks="hotTasks" @refresh="refresh"></hot-recommendation>
  <!-- 介绍我们，我们的优势 -->
  <advantage></advantage>
  <!-- 使用手册 -->
  <using></using>
  <!-- 需要提前了解的东西 -->
  <need-knows></need-knows>
  <!-- 最后加入我们 -->
  <index-finally />
  <!-- 返回顶部 -->
  <el-backtop :right="30" :bottom="100" />
</template>

<script setup lang="ts">
import headInfo from './c-cpns/head-info.vue'
import cmNumsOut from './c-cpns/cm-nums-out.vue'
import info from './c-cpns/info.vue'
import hotRecommendation from './c-cpns/hot-recommendation.vue'
import advantage from './c-cpns/advantage.vue'
import using from './c-cpns/using.vue'
import needKnows from './c-cpns/need-knows.vue'
import indexFinally from './c-cpns/index-finally.vue'
import { projectTypeDictionary } from '@/global/dictionarys'
import { getProjectAllRequest } from '@/service/index/index'
import { onMounted, ref } from 'vue'
import { difArray } from '@/utils/randomNum'
import { refreshdata } from '@/service/index/index'
import { ElMessage } from 'element-plus'
interface retenDataType {
  integrals: string
  projects: string
  users: string
  allPages: Array<number>
  pro: Array<Array<object>>
}
interface showMsg {
  integrals: number
  projects: number
  users: number
}
type resType = {
  data: retenDataType
}
type hotTasks = {
  allPagesNumber: number
  content: Array<Object>
  nowPage: number
  projectType: string
  title: string
}

//给平台数据组件传递数据
const countData: any = ref<showMsg>({ integrals: 0, projects: 0, users: 0 })
const zmArr: Array<string> = [
  '',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N'
]

const hotTasks: any = ref([])
const allPages: any = ref([])
//随机取1-13的六个数字组成数组
const itemArr: Array<number> = difArray(1, 13)

onMounted((): void => {
  getProjectAllRequest().then((res: resType) => {
    try {
      const { integrals, projects, users } = res.data
      countData.value = { integrals, projects, users }
      allPages.value = res.data.allPages
      //根据随机取得的六个数字从所有的项目类型中取六个
      let temp: Array<hotTasks> = []
      for (let i = 0; i < itemArr.length; i++) {
        let tempObj: hotTasks = {
          allPagesNumber: 0,
          content: [],
          nowPage: 0,
          projectType: '',
          title: ''
        }
        hotTasks.value.push(res.data.pro[itemArr[i]])
        //将项目类型，任务列表，总页面数，当前页面数，项目类型（字母）装进一个对象
        tempObj['title'] = projectTypeDictionary[zmArr[itemArr[i]]]
        tempObj['content'] = res.data.pro[itemArr[i]]
        tempObj['allPagesNumber'] = res.data.allPages[itemArr[i]]
        tempObj['nowPage'] = 0
        tempObj['projectType'] = zmArr[itemArr[i]]
        //将每一次打包的对象存进数组（之后要传给子组件）
        temp.push(tempObj)
      }
      hotTasks.value = temp
    } catch (error) {
      ElMessage.error('网络异常，请刷新重试')
    }
  })
})

//遵循单项数据流，让子组件触发父组件的时间，再由父组件传值给子组件
const refresh = (val: object, item: number): void => {
  refreshdata(val).then((e: any) => {
    hotTasks.value[item].content = e.data.Projects
  })
}
onMounted(() => {
  document.title = '首页 - 实力接单'
})
</script>

<style lang="less" scoped>
.el-backtop {
  z-index: 1000;
}
</style>
